<template>
  <div>
    <div class="tou">支付页面</div>
    <div class="box1">
      <span class="span1">订单号:1620826379070141328</span>
      <tr></tr>
      <span class="span2">¥7998</span>
    </div>
    <div class="box2">
      <div class="box3">
        <span class="span3">请选择支付方式</span>
        <span class="span3"
          ><img
            class="img1"
            src="https://img0.baidu.com/it/u=4113726152,4118237467&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=390"
            alt=""
          />支付宝支付</span
        >
        <span class="span3">
          <img
            class="img1"
            src="https://pic.rmb.bdstatic.com/bjh/news/d36fc726f25303f712f085b72f3b3eb5.jpeg"
            alt=""
          />
          微信支付</span
        >
      </div>
      <div class="box4">
        <van-checkbox v-model="checked1" class="input1"></van-checkbox>
        <van-checkbox v-model="checked" class="input2"></van-checkbox>
      </div>
    </div>
    <div class="box5">
      <button class="button">确定支付</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      checked1: false,
    };
  },
};
</script>

<style  scoped>
.tou {
  width: 100%;
  background-color: #fb4723;

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.box1 {
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: column; /* 垂直排列子盒子 */
  justify-content: center; /* 垂直居中子盒子（如果需要） */
  align-items: center; /* 水平居中子盒子（如果需要） */
}
.span1 {
  margin-top: -0.5rem;
  font-size: 0.32rem;
  color: #c2c2c2;
  margin-bottom: 10px;
}
.span2 {
  font-size: 1rem;
}
.img1 {
  width: 0.32rem;
  height: 0.32rem;
}
.box2 {
  display: flex;
  justify-content: space-between; /* 子元素分布在容器的两端 */
  align-items: center; /* 垂直居中（如果需要） */
}
.box3 {
  display: flex;
  flex-direction: column; /* 垂直排列子盒子 */
  justify-content: center; /* 垂直居中子盒子（如果需要） */
  margin-left: 1rem;
}
.box4 {
  display: flex;
  flex-direction: column; /* 垂直排列子盒子 */
  justify-content: center; /* 垂直居中子盒子（如果需要） */
  margin-right: 1rem;
}
.span3 {
  float: left;
  font-size: 0.32rem;
  margin-top: 0.3rem;
}
.input1 {
  float: left;
  margin-top: 1.1rem;
}
.input2 {
  float: left;
  margin-top: 0.3rem;
}
.box5 {
  float: left;
  margin-top: 40%;
  margin-left: 7%;
}
.button {
  width:6.5rem;
  height: 1rem;
  border: none;
  /* 设置圆角 */
  border-radius: 1rem;/* 你可以根据需要调整这个值 */
  /* 其他样式 */
  padding: 10px 20px; /* 内边距 */
  background-color: #4caf50; /* 背景色 */
  color: white; /* 文字颜色 */
  font-size: 16px; /* 字体大小 */
  cursor: pointer; /* 鼠标悬停时显示小手图标 */
}
</style>
